<template>
  <div class="imgpop">
    <van-popup :close-on-click-overlay="false" v-model="show" class="mypop">
      <div @click="openFile">从相册中选择</div>
      <input ref="myfile" @change="imgChange" type="file" style="display:none">
      <div class="middle">拍照</div>
      <div @click="show=false">取消</div>
    </van-popup>
  </div>
</template>

<script>
import { apiPhoto } from '@/api/my.js'
import { ImagePreview } from 'vant'
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    openFile () {
      this.$refs.myfile.click()
    },
    // 选中图片发生改变时
    imgChange () {
      const file = this.$refs.myfile.files[0]
      // 方法一
      // const path = URL.createObjectURL(file)
      // ImagePreview([path])
      // 方法二
      const reader = new FileReader()
      // 开始转换
      reader.readAsDataURL(file)
      // 设置转换成功后的事件
      reader.addEventListener('load', () => {
        // 预览图片
        ImagePreview({
          images: [reader.result],
          onClose: this.closeImg
        })
      })
    },
    // 关闭预览打开弹窗
    closeImg () {
      // 关闭弹出层
      this.show = false
      // 弹出提示框
      this.$dialog.confirm({
        message: '是否将该图片设为头像'
      }).then(async () => {
        // on confirm
        // 得到上传的图片
        const file = this.$refs.myfile.files[0]
        // 提交到服务器
        const res = await apiPhoto(file)
        window.console.log('上传的图片信息:', res)
        // 保存信息
        const photo = res.data.data.photo
        // 将信息传给个人资料组件中
        this.$emit('passPhoto', photo)
        window.console.log('确定')
      }).catch(() => {
        // on cancel
        window.console.log('取消')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.imgpop{
    .mypop{
        width: 90%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        border-radius: 5px;
        .middle {
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
    }
}
</style>
